<template>
  <div ref="echarts" style="width: 100%; height: 100%"></div>
</template>
  
  <script>
import * as echarts from "echarts";

export default {
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      const myChart = echarts.init(this.$refs.echarts);
      const option = {
        title: {
          text: "班组效率对比",
          left: "center",
          top: "5%",
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["计划量", "完成量", "完成时间", "能源消耗"],
          top: "bottom",
        },
        calculable: true,
        xAxis: [
          {
            type: "category",
            // prettier-ignore
            data: ['A班', 'B班', 'C班'],
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "计划量",
            type: "bar",
            data: [1000, 1300, 1200],
            markPoint: {
              data: [
                { type: "max", name: "Max" },
                { type: "min", name: "Min" },
              ],
            },
            markLine: {
              data: [{ type: "average", name: "Avg" }],
            },
          },
          {
            name: "完成量",
            type: "bar",
            data: [1050, 1350, 1250],
            markPoint: {
              data: [
                { type: "max", name: "Max" },
                { type: "min", name: "Min" },
              ],
            },
            markLine: {
              data: [{ type: "average", name: "Avg" }],
            },
          },
          {
            name: "完成时间",
            type: "bar",
            data: [6, 5, 7],
            markPoint: {
              data: [
                { type: "max", name: "Max" },
                { type: "min", name: "Min" },
              ],
            },
            markLine: {
              data: [{ type: "average", name: "Avg" }],
            },
          },
          {
            name: "能源消耗",
            type: "bar",
            data: [600, 500, 700],
            markPoint: {
              data: [
                { type: "max", name: "Max" },
                { type: "min", name: "Min" },
              ],
            },
            markLine: {
              data: [{ type: "average", name: "Avg" }],
            },
          },
        ],
      };
      myChart.setOption(option);
    },
  },
};
</script>
  